import  React,{Component} from 'react'

import '../../../static/css/client.less'
import {Avatar} from "antd";
import { UserOutlined } from '@ant-design/icons';
import {  Button} from 'antd'

function  goView(e){
    var url1 = '/article/view/'+e
    var win = window.open(url1,'_blank')
    win.focus()
}

function goEdit(e){
    console.log(e)
    // var url1 = '/article/view/'+e
    // var win = window.open(url1,'_blank')
    // win.focus()
}

// const {SubMenu} = Menu
class ClientMain extends Component{
    constructor(props) {
        super(props);
        this.state={
            // subContentName:'view'
            list:[
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'121'},
                {image:'#',type:'文章类型',author:'文章作者',info:'文章简介',date:'文章发布日期',no:'121'},
            ]
        }
    }
    componentDidMount() {
        document.title = '个人首页'
    }
    delete(e){
        console.log(e)
    }

    render() {
        const  items = this.state.list
        return　(
            <>
                <div className='clientInfo'>
                    <Avatar className='image' shape='square' size={90} icon={<UserOutlined />} />
                    <p className='name'>name</p>
                    <p className='info'>info</p>
                </div>
                <div className='clientMain'>
                    该作者目前已公开发布的作品：
                    <div className='clientContentOpen clientArticleList'>
                        <p></p>
                        <ul>
                            {
                                items.map((items) =>
                                    <li key={items.no}>
                                        <div className='itemImage'>
                                            <img src={items.image} alt='文章图片' />
                                        </div>
                                        <div className='itemInfo' >
                                            <p className='itemTitle'>{items.title}</p>
                                            <p className='itemType'>{items.author} | {items.type}</p>
                                            <div className='itemInfo2'>
                                                <p className='double-line'>{items.info}</p>
                                            </div>
                                            <p className='itemDate'>{items.date}</p>
                                        </div>
                                        <div className='itemButton'>
                                            <Button onClick={()=> goView(items.no)}>预览</Button>
                                            <Button onClick={()=> this.delete(items.no)} danger>删除</Button>
                                            <Button onClick={()=> goEdit(items.no)}>编辑</Button>
                                        </div>
                                    </li>
                                )
                            }
                        </ul>
                    </div>
                </div>
            </>

        )
    }
}

export default ClientMain
